<template>
    <div class="sensitive_manage">
        <RouteTitle />
        <div class="top_view">
            <div class="left_title">
                <span>风险词管理</span>
                <a-input-search v-model:value="pageInfo.word" placeholder="请输入敏感词"
                    style="width: 200px; margin-left: 20px;" @search="onSearch" />
                <div class="tips">（点击风险词进行编辑，点击x号进行删除。）</div>
            </div>
            <div class="right_operate">
                <a-button type="primary" style="margin-left: 10px;" @click="addModel">
                    <template #icon>
                        <PlusOutlined />
                    </template>
                    新增风险词
                </a-button>
            </div>
        </div>
        <a-spin style="height: 100%; height: 100vh;" :spinning="tableLoading">
            <div class="table_con">
                <a-tag @click="editThis(item)" class="table_item" v-for="(item, index) in tableList" :key="index"
                    closable @close.stop="deleteThis(item.id)">
                    {{ item.word }}
                </a-tag>
            </div>
        </a-spin>

        <div class="bottom_pagination">
            <a-pagination v-model:current="pageInfo.page" v-model:pageSize="pageInfo.pageSize" :total="pageInfo.total"
                show-size-changer :page-size-options="pageInfo.pageSizeOptions" :showTotal="pageInfo.showTotal"
                @change="handleTableChange" />
        </div>

        <editModal :visible="editVisible" :sensitiveInfo="sensitiveInfo" @close="closeEdit" />
    </div>
</template>

<script>
import {
    message,
    Form,
    Modal
} from 'ant-design-vue';
import {
    PlusOutlined,
    ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import {
    defineComponent,
    reactive,
    toRefs,
    createVNode
} from 'vue';
import editModal from './modules/editRiskModal.vue';
import request from '../../../common/utils/request.js';
import utils from '../../../common/utils/utils.js';
export default defineComponent({
    components: {
        PlusOutlined,
        editModal
    },
    setup(props, constext) {
        const state = reactive({
            tableColumns: [{
                title: '风险词',
                dataIndex: 'word',
                width: 720,
                slots: {
                    customRender: 'word',
                },
            },
            {
                title: '操作',
                slots: {
                    customRender: 'operate',
                },
            },
            ],
            tableList: [],

            pageInfo: {
                page: 1,
                total: 0,
                pageSize: 300,
                showSizeChanger: true,
                pageSizeOptions: ['15', '30', '45', '60', '75', '90'],
                showTotal: total => `共${total}条`,
                word: ''
            },

            editVisible: false,
            sensitiveInfo: {},
            tableLoading: false,
        })

        const handleTableChange = (
            current,
            pageSize
        ) => {
            state.pageInfo.page = current
            state.pageInfo.pageSize = pageSize
            getSensitiveList()
        }

        const getSensitiveList = () => {
            state.tableLoading = true
            let params = {
                page: state.pageInfo.page,
                pageSize: state.pageInfo.pageSize,
                word: state.pageInfo.word
            }
            request.get('/work_ai', '/user/shotstack/banned/list', params).then(res => {
                state.tableList = res.result.data
                state.pageInfo.total = res.result.total
                state.tableLoading = false
            }).catch(err => {
                state.tableLoading = false
            })
        }

        getSensitiveList()

        const deleteThis = (id) => {
            Modal.confirm({
                title: () => '确定删除此风险词吗?',
                icon: () => createVNode(ExclamationCircleOutlined),
                onOk() {
                    request.del('/work_ai', '/user/shotstack/banned/delete', {
                        ids: `${id}`
                    }).then(res => {
                        message.success('删除成功！')
                        getSensitiveList()
                    })
                },
                okText: '确定',
                cancelText: '取消',
                onCancel() {
                    console.log('Cancel');
                }
            });
        }

        const addModel = () => {
            state.sensitiveInfo = {}
            state.editVisible = true
        }

        const editThis = (record) => {
            state.sensitiveInfo = record
            state.editVisible = true
        }

        const closeEdit = (flag) => {
            state.sensitiveInfo = {}
            state.editVisible = false
            if (flag) {
                getSensitiveList()
            }
        }

        const copyThis = (text) => {
            utils.copyText(text)
        }

        const onSearch = () => {
            getSensitiveList()
        }

        return {
            ...toRefs(state),
            handleTableChange,
            deleteThis,
            editThis,
            addModel,
            closeEdit,
            copyThis,
            onSearch
        }
    }
})
</script>

<style lang="less" scoped>
.sensitive_manage {
    width: 100%;
    min-height: 100%;
    background-color: #ffffff;
    padding: 24px;

    .top_view {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left_title {
            display: flex;
            align-items: center;

            .tips {
                color: #999;
                margin-left: 20px;
                font-size: 14px;
                color: red;
            }
        }
    }

    .table_con {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        transform: translateX(-10px);

        .table_item {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 5px 10px;
        }
    }

    .bottom_pagination {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 20px;
    }
}
</style>
